<template>
  <div class="verify-container">
    <div class="flex">
      <div
        v-for="(item, index) in localImages"
        :key="item"
        class="verify-img"
        :src="item"
      >
        <img :src="item" alt="" />
      </div>
    </div>
    <slide-verify
      v-if="localImages.length > 0"
      ref="block"
      :imgs="localImages"
      :w="310"
      :h="155"
      slider-text="向右滑动"
      @success="handleSuccess"
    ></slide-verify>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

const localImages = ref<string[]>([]);
const block = ref();

onMounted(() => {
  setTimeout(() => {
    localImages.value = [
      new URL("@/assets/verify/img.jpg", import.meta.url).href,
      new URL("@/assets/verify/img1.jpg", import.meta.url).href,
      new URL("@/assets/verify/img2.jpg", import.meta.url).href,
      new URL("@/assets/verify/img3.jpg", import.meta.url).href,
      new URL("@/assets/verify/img4.jpg", import.meta.url).href,
      new URL("@/assets/verify/img5.jpg", import.meta.url).href,
    ];
  }, 500);
});
const handleSuccess = (time: number) => {
  console.log("验证通过，耗时:", time);
  alert(`验证成功！耗时 ${time}ms`);
};
</script>

<style scoped lang="scss">
.verify-container {
  margin: 30px auto;
  width: 350px;
}
</style>
